import UsersApi from "../../api/users";
import Base from '../base.js';
// 暴露出去
export default class extends Base {
  render() {
    this.$el.html(`
  <div id="block" class="w3lvide-content" data-vide-bg="./static/usersStyle/images/catVideo.mp4"
    data-vide-options="position: 0% 50%">
    <!-- 内容 -->
    <div class="workinghny-form-grid">
        <div class="main-hotair">
            <div class="content-wthree">
                <!-- 登录两字 -->
                <h1 style="font-size: 40px;">猫眼登录</h1>
                <form action="#" method="post">
                    <!-- 输入框 -->
                    <input type="text" class="username" name="username" placeholder="账号" required="请输入账号" value="l4" autofocus>
                    <input type="password" class="password" name="password" placeholder="密码" required="请输入密码" value="123" autofocus>
                        <!-- 按钮 -->
                    <button class="login-btn" name="login-btn" type="button">登录</button>
                </form>
                <!-- 附加信息 -->
                <p class="continue"><span>Four groups of production</span></p>
                <div class="social-login" >
                    <a href="http://baidu.com" id="underline">
                        <span class="fa">忘记密码？百度一下</span>
                    </a>
                    <a href="#/usersReg" id="underline">
                        <span class="fa" name="reg-btn">还没账号？点击注册</span>
                    </a>           
                    <a href="#/login" id="topRight">
                        <span class="fa" name="reg-btn">管理登录</span>
                    </a>
                </div>
            </div>
        </div>
        <!-- 底部友情链接板块 -->
        <div class="copyright text-center">
            <p class="copy-footer-29">© 2021 友情链接 | <a href="https://baidu.com">百度</a></p>
        </div>
    </div>
</div>
    `);
    this.$usernameEle = $("input[name=username]");
    this.$passwordEle = $("input[name=password]");
    this.$loginBtn = $("button[name=login-btn]");
    this.$regBtn = $("button[name=reg-btn]");
  }
  async loginHandle() { //登录
    const username = this.$usernameEle.val(); //获取值
    const password = this.$passwordEle.val();
    // location.hash="#/info";// 视图跳转
    const data = await UsersApi.login({
      username,
      password,
    });
    if (data) {
      // adminsApi.setToken(token);
      location.hash = "#/info";
      return;
    }
    // 登录失败弹窗
    layer.msg("登录失败，5秒后自动关闭", {
      time: 5 * 1000
      , success: function (layero, index) {
        var timeNum = this.time / 1000, setText = function (start) {
          layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
        };
        setText(!0);
        this.timer = setInterval(setText, 1000);
        if (timeNum <= 0) clearInterval(this.timer);
      }
      , end: function () {
        clearInterval(this.timer);
      },
      btn: ['确&nbsp&nbsp&nbsp&nbsp定', '返&nbsp&nbsp&nbsp&nbsp回']
    });


  };
  regHandle() {
    location.hash = "#/usersReg" //视图跳转注册页面
  };
  handle() {
    this.$loginBtn.on("click", this.loginHandle.bind(this));
    this.$regBtn.on("click", this.regHandle.bind(this));
  };
}

